<template>
  <div>
    <Row :gutter="20" style="margin-top: 20px;">
      <i-col span="6">
        <Card shadow>
          <chart-temperature style="height: 300px;" :temperature='getAllTypeData[0].Value' :text="getAllTypeData[0].Display"></chart-temperature>
        </Card>
      </i-col>
      <i-col span="18">
        <Card shadow>
          <chart-line style="height: 300px;" :value="lineData" :text="getAllTypeData[0].Display+'历史记录'" :max='32' :min='30'></chart-line>
          <!-- <chart-line style="height: 300px;" :value="lineData[getAllTypeData[0].Index]" :text="getAllTypeData[0].Display+历史记录" :max='32' :min='30'></chart-line> -->
        </Card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 20px;">
      <i-col span="6">
        <Card shadow>
          <chart-gauge style="height: 300px;" :gaugeData='getAllTypeData[1].Value' :max='100' :dataFormatter='getAllTypeData[1].Value+getAllTypeData[1].Unit' :text="getAllTypeData[1].Display"></chart-gauge>
        </Card>
      </i-col>
      <i-col span="18">
        <Card shadow>
          <chart-line style="height: 300px;" :value="lineData" :text="getAllTypeData[1].Display+'历史记录'" :max='32' :min='30'></chart-line>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 20px;">
      <i-col span="6">
        <Card shadow>
          <chart-gauge style="height: 300px;" :gaugeData='getAllTypeData[2].Value' :max='1200' :dataFormatter='getAllTypeData[2].Value+getAllTypeData[2].Unit' :text="getAllTypeData[2].Display"></chart-gauge>
        </Card>
      </i-col>
      <i-col span="18">
        <Card shadow>
          <chart-line style="height: 300px;" :value="lineData" :text="getAllTypeData[2].Display+'历史记录'" :max='32' :min='30'></chart-line>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 20px;">
      <i-col span="6">
        <Card shadow>
          <chart-gauge style="height: 300px;" :gaugeData='getAllTypeData[3].Value' :max='30' :dataFormatter='getAllTypeData[3].Value+getAllTypeData[3].Unit' :text="getAllTypeData[3].Display"></chart-gauge>
        </Card>
      </i-col>
      <i-col span="18">
        <Card shadow>
          <chart-line style="height: 300px;" :value="lineData" :text="getAllTypeData[3].Display+'历史记录'" :max='32' :min='30'></chart-line>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 20px;">
      <i-col span="6">
        <Card shadow>
          <chart-ring style="height: 300px;" :ringData='getAllTypeData[4].Value' :text="getAllTypeData[4].Display"></chart-ring>
        </Card>
      </i-col>
      <i-col span="18">
        <Card shadow>
         <chart-radar style="height: 300px;" :text="getAllTypeData[4].Display+'历史记录'"></chart-radar>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 20px;">
      <i-col span="6">
        <Card shadow>
          <chart-liquid-fill style="height: 300px;" :liquidFillData='getAllTypeData[5].Value' :text="getAllTypeData[5].Display"></chart-liquid-fill>
        </Card>
      </i-col>
      <i-col span="18">
        <Card shadow>
          <chart-line style="height: 300px;" :value="lineData" :text="getAllTypeData[5].Display+'历史记录'" :max='32' :min='30'></chart-line>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 20px;">
      <i-col span="6">
        <Card shadow>
          <chart-gauge style="height: 300px;" :gaugeData='getAllTypeData[6].Value' :max='2000' :dataFormatter='getAllTypeData[6].Value+getAllTypeData[3].Unit' :text="getAllTypeData[6].Display"></chart-gauge>
        </Card>
      </i-col>
      <i-col span="18">
        <Card shadow>
          <chart-line style="height: 300px;" :value="lineData" :text="getAllTypeData[6].Display+'历史记录'" :max='32' :min='30'></chart-line>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 20px;">
      <i-col span="6">
        <Card shadow>
          <chart-temperature style="height: 300px;" :temperature='getAllTypeData[7].Value' :text="getAllTypeData[7].Display"></chart-temperature>
        </Card>
      </i-col>
      <i-col span="18">
        <Card shadow>
          <chart-line style="height: 300px;" :value="lineData" :text="getAllTypeData[7].Display+'历史记录'" :max='32' :min='30'></chart-line>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 20px;">
      <i-col span="6">
        <Card shadow>
          <chart-gauge style="height: 300px;" :gaugeData='getAllTypeData[8].Value*100' :max='100' :dataFormatter='getAllTypeData[8].Value*100+getAllTypeData[8].Unit' :text="getAllTypeData[8].Display"></chart-gauge>
        </Card>
      </i-col>
      <i-col span="18">
        <Card shadow>
          <chart-line style="height: 300px;" :value="lineData" :text="getAllTypeData[8].Display+'历史记录'" :max='32' :min='30'></chart-line>
        </Card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 20px;">
      <i-col span="6">
        <Card shadow>
          <chart-liquid-fill style="height: 300px;" :liquidFillData='getAllTypeData[9].Value' :text="getAllTypeData[9].Display"></chart-liquid-fill>
        </Card>
      </i-col>
      <i-col span="18">
        <Card shadow>
          <chart-line style="height: 300px;" :value="lineData" :text="getAllTypeData[9].Display+'历史记录'" :max='32' :min='30'></chart-line>
        </Card>
      </i-col>
    </Row>
  </div>
</template>
<script>
import { ChartLine, ChartGauge, ChartRing, ChartRadar, ChartLiquidFill, ChartTemperature} from '_c/charts'
export default {
  name: 'realTime',
  components: {
    ChartLine,
    ChartGauge,
    ChartRing,
    ChartRadar,
    ChartLiquidFill,
    ChartTemperature
  },
  data () {
    return {
      lineData: [
        {value: 31.5, time: '2017-8-1'},
        {value: 31.1, time: '2017-8-2'},
        {value: 30.6, time: '2017-8-3'},
        {value: 30.2, time: '2017-8-4'},
        {value: 32.0, time: '2017-8-5'}
      ],
      // getAllTypeData:[],
      // getAllTypeData:[{"Display":"","Value":0,"Unit":"","Index":0},{"Display":"","Value":0,"Unit":"","Index":0},{"Display":"","Value":0,"Unit":"","Index":0},{"Display":"","Value":0,"Unit":"","Index":0},{"Display":"","Value":0,"Unit":"","Index":0},{"Display":"","Value":0,"Unit":"","Index":0},{"Display":"","Value":0,"Unit":"","Index":0},{"Display":"","Value":0,"Unit":"","Index":0},{"Display":"","Value":0,"Unit":"","Index":0}],
      getAllTypeData: [{'Display': '大气温度', 'Value': 31.6, 'Unit': '℃', 'Index': 3}, {'Display': '大气湿度', 'Value': 71.4, 'Unit': '%', 'Index': 4}, {'Display': '气压', 'Value': 986.9, 'Unit': 'hP', 'Index': 5}, {'Display': '风速', 'Value': 0, 'Unit': 'm/s', 'Index': 6}, {'Display': '风向', 'Value': 46, 'Unit': '°', 'Index': 7}, {'Display': '降雨量', 'Value': 0, 'Unit': 'mm', 'Index': 8}, {'Display': '总辐射', 'Value': 0, 'Unit': 'W/m2', 'Index': 9}, {'Display': '土壤温度', 'Value': 33.26, 'Unit': '℃', 'Index': 11}, {'Display': '土壤湿度', 'Value': 0.48, 'Unit': '%', 'Index': 12}, {'Display': '蒸发', 'Value': 0, 'Unit': 'mm', 'Index': 13}]
    }
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    // this.fetchDate();
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    // '$route': 'fetchDate'
  },
  mounted () {
    var _this = this
    // setInterval(function () {
    //   _this.fetchDate()
    // }, 10000)
  },
  methods: {
    fetchDate () {
      // console.log(this.$route.path);
      // 各个类型数据
      var _this = this
      this.$axios.get('http://yunlink.027010.cn/OpenAPI/GetReal', {
		    params: {
          sn: '01677062224',
          pwd: '062224',
          id: '1'
		    }
	  	})
	  	.then(function (response) {
	    	// console.log(response);
          var res = response.data.Weathers
          _this.getAllTypeData = Object.assign({}, _this.getAllTypeData, res)
	  	})
	  	.catch(function (error) {
	    	console.log(error)
        })
      // 历史数据
      // this.$axios.get('http://yunlink.027010.cn/OpenAPI/GetHistory', {
      //   params: {
      //     // sn:'01677062224',
      //     // pwd:'062224',
      //     sn:'00000000000',
      //     pwd:'123456',
      //     id:'1',
      //     start:'2017-8-1',
      //     end:'2017-8-2'
      //   }
      // })
      // .then(function (response) {
      //   console.log(response.data.Data);
      //   var res=response.data.Data;
      //   _this.getHistoryData= Object.assign({},_this.getHistoryData, res)
      // })
      // .catch(function (error) {
      //   console.log(error);
      // });
    }
  }
}
</script>
